<template>
  <div class="playlist-title">
    <div class="title-mask">
      <img :src="playlist.coverImgUrl" :alt="playlist.name" />
    </div>
    <div class="title-info">
      <p>
        <span></span>
        <span>{{playlist.name}}</span>
      </p>
      <p>
        <img :src="playlist.creator.avatarUrl" :alt="playlist.creator.nickname" />
        <span>{{playlist.creator.nickname}}</span>
        <span></span>
        <span>{{playlist.updateTime | timer}} 创建</span>
      </p>
      <div class="button">
        <a href="javascript:;" title="播放">播放</a>
        <a href="javascript:;" title="添加到歌单">+</a>
        <a href="javascript:;" title="收藏">({{playlist.subscribedCount}})</a>
        <a href="javascript:;" title="分享">分享</a>
        <a href="javascript:;" title="下载">({{playlist.shareCount}})</a>
        <a href="javascript:;" title="评论">({{playlist.commentCount}})</a>
      </div>
      <p>
        标签：
        <span v-for="item in playlist.tags" :key="item.index">
          <i>{{item}}</i>
        </span>
      </p>
      <div class="introduce">介绍：{{playlist.description}}</div>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/common/format'

export default {
  props: {
    playlist: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  filters: {
    timer(val) {
      return formatDate(val, 'yyyy-MM-dd')
    }
  },
}
</script>

<style scoped>
/* 歌单头部信息区域 */
.playlist-title {
  display: flex;
}

/* 左边图片区域 */
.title-mask {
  width: 208px;
  height: 208px;
  padding: 4px;
  background: url(~@/assets/img/coverall.png) 0px -1285px;
}
.title-mask img {
  width: 200px;
  height: 200px;
}

/* 右边文字区域 */
.title-info {
  font-size: 12px;
  margin-left: 20px;
}
/* 第一行 */
.title-info p:nth-child(1) {
  display: flex;
  line-height: 24px;
  font-size: 20px;
  margin-bottom: 15px;
}
.title-info p:nth-child(1) span:nth-child(1) {
  display: inline-block;
  width: 54px;
  height: 24px;
  margin-right: 10px;
  background: url(~@/assets/img/icon.png) 0 -243px;
}

/* 第二行 */
.title-info p:nth-child(2) {
  display: flex;
  line-height: 35px;
}
.title-info p:nth-child(2) img {
  width: 35px;
  height: 35px;
  margin-right: 10px;
  cursor: pointer;
}
.title-info p:nth-child(2) span:nth-child(2) {
  color: #2a7bc8;
  cursor: pointer;
}
.title-info p:nth-child(2) span:nth-child(2):hover {
  text-decoration: underline;
}
.title-info p:nth-child(2) span:nth-child(3) {
  display: inline-block;
  width: 12px;
  height: 13px;
  background: url(~@/assets/img/icon.png) -65px -840px;
  margin: 10px 15px 0 3px;
}
.title-info p:nth-child(2) span:nth-child(4) {
  color: #888;
}

/* button */
.button {
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.button a {
  padding: 0 8px 0 28px;
  color: #000;
  border-radius: 5px;
  box-shadow: 0 0 1px #000;
  height: 30px;
  line-height: 30px;
  cursor: pointer;
  margin-right: 8px;
  background: url(~@/assets/img/button.png) no-repeat -5px -805px;
}
.button a:nth-child(1) {
  color: #fff;
  margin-right: 0;
  border-radius: 5px 0 0 5px;
  border: 1px solid #1c6dbd;
}
.button a:nth-child(1):hover {
  background-position: -5px -633px;
}
.button a:nth-child(2) {
  color: #fff;
  font-size: 22px;
  padding: 0 8px;
  background-position: -5px -551px;
  border: 1px solid #1c6dbd;
  border-radius: 0 5px 5px 0;
}
.button a:nth-child(2):hover {
  background-position: -5px -387px;
}
.button a:nth-child(3) {
  background-position: 0 -1063px;
}
.button a:nth-child(4) {
  background-position: 0 -1268px;
}
.button a:nth-child(5) {
  background-position: 0 -2805px;
}
.button a:nth-child(6) {
  background-position: 0 -1508px;
}

/* 第四行：标签 */
.title-info p:nth-child(4) {
  display: flex;
  line-height: 22px;
  margin-bottom: 10px;
  color: #666;
}
.title-info p:nth-child(4) span {
  display: inline-block;
  text-align: center;
  margin-right: 10px;
  background: url(~@/assets/img/button.png) right -27px;
  padding-right: 10px;
  cursor: pointer;
}
.title-info p:nth-child(4) span i {
  display: inline-block;
  padding-left: 10px;
  font-style: normal;
  background: url(~@/assets/img/button.png) 0 0;
}
.title-info p:nth-child(4) span:hover {
  background-position-y: -1430px;
}
.title-info p:nth-child(4) span:hover i {
  background-position-y: -1400px;
}

/* 介绍 */
.introduce {
  color: #666;
  line-height: 20px;
  white-space: pre-wrap;
  margin-bottom: 30px;
}
</style>